<template>
    <Teleport to="#message">
        <div class="alert message-info fixed-top w-50 mx-auto d-flex justify-content-between mt-2" role="alert"
            :class="classObject"
            v-if="isVisble">
            <strong>{{ message }}</strong>
            <button type="button" class="btn" aria-label="Close" @click="hide"><span aria-hidden="true">&times;</span></button>
        </div>
    </Teleport>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import userDOMCreate from '@/hooks/userDOMCreate'

export type MessageType = 'success' | 'error' | 'default'

export default defineComponent({
    props: {
        message: String,
        type: {
            type: String as PropType<MessageType>,
            default: 'default'
        }
    },
    setup(props) {
        // const node = document.createElement('div')
        // node.id = 'message'
        // document.body.appendChild(node)
        userDOMCreate('message')
        const isVisble = ref(true)
        const classObject = {
            'alert-success': props.type === 'success',
            'alert-danger': props.type === 'error',
            'alert-primary': props.type === 'default'
        }
        // 点击手动让这个信息提示消失
        const hide = () => {
            isVisble.value = false
        }
        return {
            isVisble,
            classObject,
            hide
        }
    },
})
</script>
